<template>
	<div class="page" v-if="show">
		<!-- <van-notice-bar wrapable :scrollable="false" text="注：在录入客户信息前，请获取客户的同意" /> -->

		<!-- <div class="status-title" v-if="is_verify === 2">
			<img src="../assets/121.png" alt="" />
			审核状态：不通过
		</div>
		<div class="status-info" v-if="is_verify === 2">
			<div class="status-text">审核不通过原因: </div>
			<div class="cue">信息不对，重新修改再提交</div>
		</div>
		
		<div class="status-title success" v-if="is_verify === 1">
			<img src="../assets/122.png" alt="" />
			审核状态：通过
		</div>
		
		<div class="status-title await" v-if="is_verify === 0">
			<img src="../assets/123.png" alt="" />
			审核状态：待审核
		</div> -->

		<div class="form-data">
			<div class="form">
				<div class="title">{{$t('language.text2')}}</div>
				<van-field v-model="title" disabled :placeholder="$t('language.text2')" />
			</div>
			<!-- <div class="form">
				<div class="title">{{$t('language.text3')}}</div>
				<van-field v-model.number="room_num" disabled :placeholder="$t('language.text4')" />
			</div>
			<div class="form">
				<div class="title">{{$t('language.text5')}}</div>
				<van-field v-model.number="income" disabled :placeholder="$t('language.text6')" />
			</div> -->
			<div class="form">
				<div class="title">{{$t('language.text7')}}</div>
				<van-field v-model="agreement_price_code" disabled :placeholder="$t('language.text8')" />
			</div>
			<div class="form">
				<div class="title">{{$t('language.text54')}}</div>
				<van-field v-model="price_code" disabled :placeholder="$t('language.text54')" />
			</div>

			<div class="add-btn back" @click="$router.back()">
				{{$t('language.text25')}}
			</div>
		</div>
	</div>
</template>
<script>
	import {
		getLnrDetail,
		beLnrDetail
	} from '@/api/user';
	import {
		Toast
	} from "vant";
	export default {
		name: 'MySellDetails',
		data: function() {
			return {
				locale: 'zh',
				id: '',
				type: 2,
				info: '',
				title: '',
				room_num: '',
				income: '',
				price_code: '',
				agreement_price_code: '',
				is_verify: '',
				show: false
			};
		},
		created() {
			const {
				query
			} = this.$route;
			this.id = query.id
			const userinfo = localStorage.getItem("userinfo")
			const {
				type
			} = JSON.parse(userinfo)
			this.type = type
			this.getLnrDetailData(query.id)
		},
		mounted() {},
		methods: {
			getLnrDetailData(id) {
				if (this.type !== 4) {
					getLnrDetail({
						lnr_id: id
					}).then((res) => {
						if (res.status_code != 200) {
							Toast(res.message)
						} else {
							const {
								is_verify,
								title,
								price_code,
								agreement_price_code
							} = res.data
							this.show = true
							this.info = res.data
							this.is_verify = is_verify
							this.title = title
							this.price_code = price_code
							this.agreement_price_code = agreement_price_code
						}
					}).catch((err) => {
						console.log(err)
					})
					return
				}
				beLnrDetail({
					be_lnr_id: id
				}).then((res) => {
					if (res.status_code != 200) {
						Toast(res.message)
					} else {
						const {
							is_verify,
							title,
							price_code,
							agreement_price_code
						} = res.data
						this.show = true
						this.info = res.data
						this.is_verify = is_verify
						this.title = title
						this.price_code = price_code
						this.agreement_price_code = agreement_price_code
					}
				}).catch((err) => {
					console.log(err)
				})
			},
			changeLanguage() {
				if (this.$i18n.locale == 'zh') {
					this.$i18n.locale = 'en';
					this.$cookies.set('locale', 'en')
				} else {
					this.$i18n.locale = 'zh';
					this.$cookies.set('locale', 'zh')
				}
			}
		}
	};
</script>
<style type="text/css" lang="scss" scoped>
	.page {
		background-color: #fff;
	}

	.van-notice-bar--wrapable {
		font-size: 24px;
		padding: 20px 30px;
		color: #e8542c;
		background-color: #fbf4f3;
	}

	.status-title {
		display: flex;
		align-items: center;
		font-size: 30px;
		color: #f20000;
		margin-top: 28px;

		&.success {
			color: #09bb00;
		}

		&.await {
			color: #e8542c;
		}

		img {
			width: 72px;
			height: 72px;
			margin-left: 12px;
			image-rendering: -moz-crisp-edges;
			image-rendering: -o-crisp-edges;
			image-rendering: -webkit-optimize-contrast;
			image-rendering: crisp-edges;
			-ms-interpolation-mode: nearest-neighbor;
		}
	}

	.status-info {
		margin: 0 30px;
		padding: 30px;
		border-radius: 10px;
		background-color: #fbf4f3;

		.status-text {
			padding-bottom: 20px;
			font-size: 24px;
			color: #333333;
		}

		.cue {
			color: #e8542c;
		}
	}

	.form-data {
		padding: 0 30px;
	}

	.form {
		margin-top: 50px;
		padding-bottom: 30px;
		border-bottom: 1px solid #eee;

		.title {
			font-size: 30px;
			color: #333333;
			margin-bottom: 36px;
		}

		.van-cell {
			padding: 0;
		}

		.van-field__control {
			font-size: 24px;
		}
	}

	.add-btn {
		width: 100%;
		padding: 21px 0;
		margin-top: 50px;
		color: #fff;
		font-size: 28px;
		border-radius: 10px;
		text-align: center;
		background-color: #e8542c;

		&.back {
			background-color: #1f4456;
		}
	}
</style>